<template>
  <view class="registered">
    <view class="left">
      <view
        v-for="(item, index) in DeparTment_data"
        :key="index"
        @click="changeIndex(index, item._id)"
        :class="{ selectColor: currentIndex == index }"
      >
        {{ item.dep_ment }}
      </view>
    </view>
    <view class="right">
      <view
        v-for="(item, index) in reglist_data"
        :key="index"
        @click="selectDoctor(item.dep_id)"
      >
        {{ item.dep_name }}
      </view>
    </view>
  </view>
  <!-- 骨架屏 -->
  <skIndex v-if="skeLeton"></skIndex>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import apiRequest from "~/api/index";
import skIndex from "~/Skeleton/SK-registered.vue";
const DeparTment_data = ref([]);
let skeLeton = ref(true);
onMounted(async () => {
  // 请求左边列表数据
  const res = await apiRequest.DeparTment();
  DeparTment_data.value = res.data;
  changeIndex(0, DeparTment_data.value[0]._id);
});
const currentIndex = ref(0);
// 请求子科室数据
const reglist_data = ref([]);
// 点击左边菜单
const changeIndex = async (index, id) => {
  currentIndex.value = index;
  const res = await apiRequest.RegList(id);
  reglist_data.value = res.data[0].dep_ment_list;
  // 在请求页面数据都完成之后，去除骨架屏
  skeLeton.value = false;
};
const selectDoctor = (id) => {
  console.log("选择医生");
  uni.navigateTo({
    url: "/pages/doctor/doctor?id="+id,
  });
};
</script>

<style scoped>
.registered {
  @apply flex;
  height: 100vh;
}
.registered .left {
  width: 33%;
  overflow: auto;
}
/* 隐藏导航条 */
.registered .left::-webkit-scrollbar {
  display: none;
}
.registered .left view {
  @apply text-center;
  height: 100rpx;
  line-height: 100rpx;
}
.registered .right {
  @apply bg-light-50 flex-1;
}
.registered .right view {
  padding: 20rpx;
}
.selectColor {
  @apply bg-light-50 text-blue-500;
}
</style>
